<style>
.wrapper {
display: grid;
grid-template-columns:
1fr
min(30ch, 100%)
1fr;
}
.wrapper > * {
grid-column: 2;
}
.full-bleed {
grid-column: 1 / -1;
}
.meerkat {
display: block;
width: 100%;
height: 300px;
object-fit: cover;
}
</style>
<main class="wrapper">
<h1>Some Heading</h1>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
</p>
<div class="full-bleed">
<img
alt="a satisfied-looking cute meerkat"
src="/cfj-mats/meerkat.jpg"
class="meerkat"
/>
</div>
<p>
It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
</main>